import React from 'react'
import { connect } from 'dva'
import List from '@/components/List'
import ChartTimeBar from '@/components/ChartTimeBar'
import XModel from './XModel'
import Header from './Header'

@connect(({ staffHall, loading }) => ({
  staffHall,
  loading: loading.effects['staffHall/fetchStaff'],
}))
class StaffHall extends React.PureComponent {

  state = {
    // eslint-disable-next-line
    pageNumber: 0
  }

  // 加载更多
  onLoadReduxMore = () => {
    const { dispatch } = this.props

    this.setState(state => {
      const pageNumber = state.pageNumber + 1
      dispatch({
        type: 'staffHall/fetchStaff',
        payload: { pageNumber }
      })
      return {
        ...state,
        pageNumber
      }
    })
  }

  // 获取详情页数据
  fetchProfile = payload => {
    const { dispatch } = this.props
    
    dispatch({
      type: 'staffHall/fetchProfile',
      payload: { visible: true, ...payload }
    })
  }

  render() {
    const { staffHall } = this.props
    const { initLoading, loading, isDisable, list } = staffHall

    const listData = {
      initLoading,
      loading,
      isDisable,
      list,
      onLoadReduxMore: this.onLoadReduxMore,
      renderItem: item => {

        // eslint-disable-next-line
        const { selfInfo = {}, otherInfo = [], project_status } = item

        const values = [0, '计划交付时间', '实际交付时间']
        const data = []
        // eslint-disable-next-line
        otherInfo.forEach(({ po_name, po_start, po_end, po_finish, po_status }) => {
          // eslint-disable-next-line
          const name = `${po_name}@${Math.random()}`
          const status = values[po_status]
          data.push({
            name,
            status,
            // eslint-disable-next-line
            range: [po_start, po_end],
          })
          // eslint-disable-next-line
          if (po_finish && Number(po_status) === 2) {
            data.push({
              name,
              status,
              // eslint-disable-next-line
              range: [po_end, po_finish],
            })
          }
        })

        const headerData = {
          sf_id: Number(selfInfo.sf_id),
          sf_name: selfInfo.sf_name,
          sf_header: selfInfo.sf_header,
          dp_name: selfInfo.dp_name,
          taskCount: Number(selfInfo.taskCount),
          sf_tel: Number(selfInfo.sf_tel),
          fetchProfile: this.fetchProfile
        }

        return (
          <React.Fragment>
            <Header {...headerData} />
            <ChartTimeBar data={data} GeomColor={['#74d0d0', '#52c41a', '#fadb14', '#bfbfbf']} />
          </React.Fragment>
        )
        
      },
    }

    return (
      <React.Fragment>
        <XModel />
        <List {...listData} />
      </React.Fragment>
    )
  }
}

export default StaffHall